<template>
  <div class="app-container" :style="backgroundStyle">
    <el-config-provider :locale="zhCn">
      <router-view></router-view>
    </el-config-provider>
  </div>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useSettingsStore } from './store/settings'
import { usePrizesStore } from './store/prizes'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const settingsStore = useSettingsStore()
const prizesStore = usePrizesStore()

onMounted(() => {
  // 确保 store 被正确初始化
  prizesStore.initializeStore()
})

const backgroundStyle = computed(() => {
  const { backgroundType, backgroundColor, backgroundImage } = settingsStore
  
  if (backgroundType === 'image' && backgroundImage) {
    return {
      backgroundImage: `url(${backgroundImage})`,
      backgroundSize: 'cover',
      backgroundPosition: 'center'
    }
  }
  
  return {
    backgroundColor: backgroundColor || '#f0f2f5'
  }
})
</script>

<style>
.app-container {
  min-height: 100vh;
  width: 100%;
}
</style> 